<template>
	<view class="content" @touchmove.stop.prevent="() => {}">
		<div class="my_work_box" id="myworkbox">
			<image src="/static/back.png" style="width: 24px;height: 24px;position: left;margin-left: 5%;" @click="backLayout()"></image>
			<div class="titlebox">
				<text v-if="currentswiper==0" style="color: #007AFF;font-size: 18px;">今日事件</text>
				<text v-else style="color: black;font-size: 18px;" @click="changeList(0)">今日事件</text>
				<text style="color: black;font-size: 18px;margin: 0 5px;">|</text>
				<text v-if="currentswiper==1" style="color: #007AFF;font-size: 18px">全部事件</text>
				<text v-else style="color: black;font-size: 18px" @click="changeList(1)">全部事件</text>
			</div>
			<div style="position: right;margin-right: 13%"></div>
		</div>
		<div class="select_box">
			<picker v-if="currentswiper==1" @change="pickmode($event)" class="picker_box" mode="selector" :range="modeList">
				{{select_mode}}
				<image src="/static/arrow-down.png" style="height: 15px;width: 15px;"></image>
			</picker>
		</div>
		<swiper style="height: 800px;background-color: #f8f8f8;" @change="changeswiper" :current="currentswiper">
			<swiper-item>
				<scroll-view scroll-y="true"  show-scrollbar="false" class="public_box">
					<div class="message_box" v-for="item in todaynewsList" >
						<div class="megbox_top">
							<p style="font-weight: bold;font-size: 16px;">{{item.type}}通知</p>
							<image v-if="checkLikeStatus(item.eventid)" src="/static/unlike.png" style="height: 20px;width: 20px;" @tap.stop="removelike(item.eventid)" tabindex="-1"></image>
							<image v-else src="/static/like.png" style="height: 20px;width: 20px;" @tap.stop="addlike(item)" tabindex="-1"></image>
						</div>
						<div style="width: 100%;font-size: 24px;text-align: center;font-weight: bold;margin: 15px 0 20px;color: #007AFF;">{{item.title}}</div>
						<p style="font-size: 14px;margin: 10px 10px;">时间：{{ item.starttime }}至{{ item.endtime }}</p>
						<p style="font-size: 14px;margin: 10px 10px;">参与方式：{{ item.space }}</p>
						<p style="font-size: 14px;margin: 10px 10px 20px;">范围：{{ item.range }}</p>
					</div>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true"  show-scrollbar="false" class="public_box">
					<div class="message_box" v-for="item in eventList" >
						<div class="megbox_top">
							<p style="font-weight: bold;font-size: 16px;margin: 10px 10px;">{{item.type}}通知</p>
							<image v-if="checkLikeStatus(item.eventid)" src="/static/unlike.png" style="height: 20px;width: 20px;" @tap.stop="removelike(item.eventid)" tabindex="-1"></image>
							<image v-else src="/static/like.png" style="height: 20px;width: 20px;" @tap.stop="addlike(item)" tabindex="-1"></image>
						</div>
						<div style="width: 100%;font-size: 24px;text-align: center;font-weight: bold;margin: 15px 0 20px;color: #007AFF;">{{item.title}}</div>
						<p style="font-size: 14px;margin: 10px 10px;">时间：{{ item.starttime }}至{{ item.endtime }}</p>
						<p style="font-size: 14px;margin: 10px 10px;">参与方式：{{ item.space }}</p>
						<p style="font-size: 14px;margin: 10px 10px 20px;">范围：{{ item.range }}</p>
					</div>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		onShareAppMessage(){},
		onShareTimeline(){},
		data() {
			return {
				mywork:[],
				currentswiper:'',
				eventList:[],
				todaynewsList:[],
				select_mode:'按热度排序',
				modeList:['按热度排序','按发布日期排序','按结束日期排序']
			}
		},
		onLoad(options) {
			this.changeList(options.status)
		},
		created() {
			this.fetchData();
			uni.getStorageInfo({
				success: (res) => {
					this.eventList=uni.getStorageSync('StorageeventList')
					this.eventList = this.eventList.slice().sort((a, b) => {
						return new Date(b.hot) - new Date(a.hot);
					});
					console.log(this.eventList)
					var tzoffset =(new Date()).getTimezoneOffset()* 60000;
					let today = (new Date(Date.now()-tzoffset)).toISOString().slice(0, 10);
					this.todaynewsList=this.eventList.filter(event => event.status == 1 && event.CreateTime.slice(0, 10) == today);
				}
			})
		},
		methods: {
			fetchData() {
				uni.getStorageInfo({
					success: (res) => {
						if(!res.keys.includes('Storageuser')){
						}
						else if (res.keys.includes('Storageuser') && !res.keys.includes('work')) {
							var name= uni.getStorageSync('Storageuser').id
							var localurl="https://127.0.0.1/data/"+name+".json"
							uni.request({
								url: localurl,
								success: res => {
									if (res.statusCode === 404) {
										internetCode = 404
									} else {
										let data = res.data;
										uni.setStorageSync("work", data.info)
										this.mywork = data.info;
										console.log(res.data)
									}
								},
								fail: err => {
									console.log(err);
								}
							});
						}
						else{
							this.mywork = uni.getStorageSync('work')
						}
					}
				})
			},
			changeswiper(e) {
				this.currentswiper = e.detail.current
			},
			changeList(targetindex){
				setTimeout(() => {
					this.currentswiper = targetindex;
				}, 50);
			},
			backLayout(){
				uni.navigateBack({delta:1,})
			},
			checkLikeStatus(eventid){
				if(this.mywork==''){}
				else{
					return this.mywork.some(item => item.id===eventid)
				}
			},
			addlike(item){
				uni.getStorageInfo({
					success: (res) => {
						if(!res.keys.includes('Storageuser')){
							uni.showToast({
								title: '请先登陆',
								icon: 'none',
								duration: 1000
							})
							uni.removeStorageSync('work')
						}
						else{
							let newwork = {
								"id":item.eventid,
								"title": item.title,
								"starttime": item.starttime,
								"endtime": item.endtime,
								"space": item.space,
								"type":item.type,
								"range":item.range,
								"status": "false",
								"remind":"不提醒"
							}
							this.mywork.unshift(newwork)
							uni.setStorageSync("work", this.mywork)
							let hotinfo={
								"id":item.eventid,
								"option":'like'
								}
								uni.showToast({
									title: '已添加到我的待办',
									icon: 'success',
									duration: 1000
								})
							uni.request({
								url: 'https://127.0.0.1/data/hot.php',
								method: 'POST',
								header: {
									'content-type': 'application/json',
								},
								data:hotinfo,
								success: (res) => {
									if(res.data.message==='Operation successful'){
										console.log('success')
									}
									else{
										console.log(res)
									}
								}
							})
						}
					}
				})
			},
			removelike(removeeventid){
				this.mywork = this.mywork.filter(thing => thing.id !== removeeventid);
				uni.setStorageSync("work", this.mywork)
				uni.showToast({
					title: '已取消添加',
					icon: 'none',
					duration: 1000
				})
				let hotinfo={
					"id":removeeventid,
					"option":'unlike'
				}
				uni.request({
					url: 'https://127.0.0.1/data/hot.php',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					data:hotinfo,
					success: (res) => {
						if(res.data.message==='Operation successful'){
							console.log('success')
						}
						else{
							console.log(res)
						}
					}
				})
			},
			pickmode(e) {
				var index = e.target.value
				this.select_mode = this.modeList[index]
				if(this.select_mode==='按发布日期排序'){
					this.eventList = this.eventList.slice().sort((a, b) => {
						return new Date(a.CreateTime) - new Date(b.CreateTime);
					});
				}
				if(this.select_mode==='按结束日期排序'){
					this.eventList = this.eventList.slice().sort((a, b) => {
						return new Date(a.endtime) - new Date(b.endtime);
					});
				}
				if(this.select_mode==='按热度排序'){
					this.eventList = this.eventList.slice().sort((a, b) => {
						return new Date(b.hot) - new Date(a.hot);
					});
				}
			},
		}
	}
</script>

<style>
template{
		height: 100%;
		width: 100%;
		background-color: #f8f8f8;
		overflow: hidden;
	}
	.content {
		overflow: hidden;
		width: 100%;
		height: 100%;	
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
		background-color: #f8f8f8;
	}
	
	.titlebox {
		top: 0;
		position: relative;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		letter-spacing: 1px;
		margin: 0 auto;
	}
	
	.my_work_box {
		margin: 14.7% 0 5% 0;
		display: flex;
		flex-direction: row;
		align-items: left;
		overflow: hidden;
	}
	.public_box{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.message_box {
		width: 95%;
		margin: 10px 15px 15px;
		border-radius: 14px;
		background: white;
		overflow: hidden;
		backface-visibility: hidden;
	}
	.megbox_top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 10px 20px 10px 15px;
	}
	.select_box{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.picker_box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 8px;
		background-color: white;
		border-radius: 5px;
		border: 1px solid #ccc!important;
		text-align: center;
	}
</style>